<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车-小米商城</title>
    <link rel="stylesheet" href="../css/购物车/购物车.css">
    <link rel="stylesheet" href="../css/购物车/iconfont.css">
    <script src="../css/购物车/iconfont.js"></script>
</head>

<body>

    <nav>

        <div class="header">
            <div class="header_left">
                <div>
                    <a href="亚马逊首页.html"><img src="../img/logo.png" alt="logo"></a>
                </div>
                <div>
                    <h4>我的购物车</h4>
                    <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
                </div>
            </div>
            <div class="header_right">

                <div>
                    <span>257776869</span> <span class="iconfont icon-arrow-down"></span>
                    <ul class="hiddlen">
                        <li><a href="#">个人中心</a></li>
                        <li><a href="#">评价晒单</a></li>
                        <li><a href="#">我的喜欢</a></li>
                        <li><a href="#">个人账户</a></li>
                        <li><a href="#">退出登录</a></li>
                    </ul>
                </div>
                <span class="vertical_line"></span>
                <p><a href="#">我的订单</a></p>
            </div>
        </div>
    </nav>


    <section>
        <div class="commodity">
            <div class="commodity_1">
                <div>
                    <svg class="icon">
                        <use xlink:href="#icon-icon-test"></use>
                    </svg>
                </div>
                <p>全选</p>
            </div>
            <div>商品名称</div>
            <div></div>
            <div>单价</div>
            <div>数量</div>
            <div>小计</div>
            <div>操作</div>
        </div>
        <div class="content">

            <div class="content_header">
                <div class="content_header_1">
                    <div>
                        <svg class="icon">
                            <use xlink:href="#icon-icon-test"></use>
                        </svg>
                    </div>
                </div>
                <div class="content_header_2"><img src="../img/phone.jpg" alt="手机"></div>
                <div class="content_header_3">
                    <div>特价</div>
                    <p>小米11 Pro 12GB+256GB 套装版</p>
                </div>
                
                
                
                
                
                
                
                
                
                
                <div class="content_header_4">5119</div>
                <div class="content_header_5">
                    <div>
                        <p class="btn">+</p>
                        <p>1</p>
                        <p class="btn">-</p>
                    </div>
                </div>
                <div class="content_header_6">
                    <p class="price">5119</p>
                    <p>已优惠1060元</p>
                </div>
                
                <script type="text/javascript">
                	var btn=document.getElementsByClassName("btn");
                	for(i=0;i<btn.length;i++){
                		btn[i].onclick=function(){
							if(this.innerHTML=="+"){
								var num=this.nextElementSibling;
								var num2=parseInt(num.innerHTML)+1;
								num.innerHTML=num2;
							}else{
								var num=this.previousElementSibling;
								if(num.innerHTML>1){
									var num2=parseInt(num.innerHTML)-1;
									num.innerHTML=num2;
								}
							}
//							var price=document.getElementsByClassName("price")[0];
//							var unitpr=document.getElementsByClassName("content_header_4")[0];
//							var shuliang=parseInt(num.innerHTML);
//							var danjia=parseInt(unitpr.innerHTML);
//							price.innerHTML=danjia*shuliang;
							total(num);
                		}
                	}
                	
                	function total(con){
                		var price=document.getElementsByClassName("price")[0];
                		var price2=document.getElementsByClassName("price2")[0];
						var unitpr=document.getElementsByClassName("content_header_4")[0];
						var shuliang=parseInt(con.innerHTML);
						var danjia=parseInt(unitpr.innerHTML);
						price.innerHTML=danjia*shuliang;
						price2.innerHTML=danjia*shuliang;
                	}	
                </script>

                
                
                
                
                
                
                
                
                <div class="content_header_7">
                    <svg class="icon">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                </div>
            </div>

            <div class="content_footer">

                <div class="content_footer_1">
                    <div><img src="../img/phone.jpg" alt="phone"></div>
                    <div><a href="#">小米11 Pro 12GB+256GB 紫色</a></div>
                    <div class="kong"></div>
                    <div>1</div>
                    <div class="kong-2"></div>
                </div>
                <div class="content_footer_1">
                    <div><img src="../img/ph.jpg" alt="phone"></div>
                    <div><a href="#">小米67W超级快充电器套装 白色</a></div>
                    <div class="kong"></div>
                    <div>1</div>
                    <div class="kong-2"></div>
                </div>

                <div class="largess">
                    <div class="largess_1"><img src="../img/glass.jpg" alt="玻璃杯"></div>
                    <div class="largess_2">
                        <div>赠品</div>
                        <p><a href="#">生生不息果冻色单肩包 白色</a></p>
                        <p><a href="#">选择其他版本</a></p>
                    </div>
                    <div class="largess_3">2</div>
                    <div></div>
                    <div></div>
                </div>
                <div class="largess">
                    <div class="largess_1"><img src="../img/tx.jpg" alt="T恤"></div>
                    <div class="largess_2">
                        <div>赠品</div>
                        <p><a href="#">生生不息炫酷黑定制T恤 黑色</a></p>
                        <p><a href="#">选择其他版本</a></p>
                    </div>
                    <div class="largess_3">2</div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="ensure_1">

                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-test"></use>
                </svg>

                <p>MiCare保障服务899元 <span>(省 50元)</span> ></p>
                <p><a href="#">了解尊享服务></a></p>
            </div>
            <div class="ensure_1">

                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-test"></use>
                </svg>

                <p>意外保障服务 599元><span>(意外损免费修)</span> ></p>
                <p><a href="#">了解意外保护></a></p>
            </div>
            <div class="ensure_1">

                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-test"></use>
                </svg>

                <p>碎屏保障服务279元<span>(省 70元)</span> ></p>
                <p><a href="#">了解意外保护></a></p>
            </div>
            <div class="ensure_1">

                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-test"></use>
                </svg>

                <p>延长保修服务159元<span>(省 40元)</span> ></p>
                <p><a href="#">了解延长保修></a></p>
            </div>
            <div class="ensure_1">

                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-test"></use>
                </svg>

                <p>云空间200G月卡1元<span>(省 20元)</span> ></p>
                <p><a href="#">了解云空间服务></a></p>
            </div>
            <div class="ensure_1">

                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-test"></use>
                </svg>

                <p>云空间年卡200G208元</p>
                <p><a href="#">了解云空间服务></a></p>
            </div>
            <div class="ensure_1">

                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-test"></use>
                </svg>

                <p>MiCare保障服务899元 <span>(省 50元)</span> ></p>
                <p><a href="#">了解尊享服务</a></p>
            </div>
            <div class="ensure_1">

                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-test"></use>
                </svg>

                <p>+99元得499元80W无线充套装 99元<span>（省 400元）</span> ></p>
            </div>


        </div>

        <div class="tuijian">

            <div class="shopping">

                <div class="shopping_left">
                    <p><a href="#">继续购物</a></p>
                    <div></div>
                    <p>共<span>7</span>件商品，已选择<span>7</span>件</p>
                </div>
                <div class="shopping_right">
                    <p>合计：<span class="price2">5119</span>元</p>
                    <a href="#">
                        <div>去结算</div>
                    </a>
                </div>
            </div>
            <div class="recommend">
                <div></div>
                <p>买购物车中商品的人还买了</p>
            </div>
            <div class="recommend_reveal">
                <a href="#">
                    <div class="lala">
                        <div><img src="../img/zzz.png" alt="phone"></div>
                        <p>华为手表</p>
                        <p>999元</p>
                        <p>10.5万人好评</p>
                        <div class="transform">加入购物车</div>
                    </div>
                </a>

                <a href="#">
                    <div class="lala">
                        <div><img src="../img/bf.png" alt="phone"></div>
                        <p>一加 OnePlus 9 Pro 5G</p>
                        <p>6399元</p>
                        <p>3.5万人好评</p>
                        <div class="transform">加入购物车</div>
                    </div>
                </a>

                <a href="#">
                    <div class="lala">
                        <div><img src="../img/aaa.png" alt="phone"></div>
                        <p>华为 Mate X2 pro</p>
                        <p>8999元</p>
                        <p>45.7万人好评</p>
                        <div class="transform">加入购物车</div>
                    </div>
                </a>
                <a href="#">
                    <div class="lala">
                        <div><img src="../img/qqq.png" alt="phone"></div>
                        <p>小米自拍杆</p>
                        <p>69元</p>
                        <p>30.5万人好评</p>
                        <div class="transform">加入购物车</div>
                    </div>
                </a>
                <a href="#">
                    <div class="lala">
                        <div><img src="../img/zz.png" alt="phone"></div>
                        <p>小米智能手表</p>
                        <p>399元</p>
                        <p>5万人好评</p>
                        <div class="transform">加入购物车</div>
                    </div>
                </a>

            </div>
            <div class="recommend_reveal_2">
                <a href="#">
                    <div class="lala">
                        <div><img src="../img/aaa.png" alt="phone"></div>
                        <p>APPle iphone 12</p>
                        <p>6599元</p>
                        <p>42万人好评</p>
                        <div class="transform">加入购物车</div>
                    </div>
                </a>
                <a href="#">
                    <div class="lala">
                        <div><img src="../img/zzz.png" alt="phone"></div>
                        <p>oppo find X3</p>
                        <p>5499元</p>
                        <p>31.2万人好评</p>
                        <div class="transform">加入购物车</div>
                    </div>
                </a>
                <a href="#">
                    <div class="lala">
                        <div><img src="../img/zz.png" alt="phone"></div>
                        <p>Redmi 9A</p>
                        <p>8999元</p>
                        <p>67.5万人好评</p>
                        <div class="transform">加入购物车</div>
                    </div>
                </a>
                <a href="#">
                    <div class="lala">
                        <div><img src="../img/eee.png" alt="phone"></div>
                        <p>Redmi 9A</p>
                        <p>8999元</p>
                        <p>67.5万人好评</p>
                        <div class="transform">加入购物车</div>
                    </div>
                </a>
                <a href="#">
                    <div class="lala">
                        <div><img src="../img/sss.png" alt="phone"></div>
                        <p>Redmi 9A</p>
                        <p>8999元</p>
                        <p>67.5万人好评</p>
                        <div class="transform">加入购物车</div>
                    </div>
                </a>
            </div>
        </div>
    </section>
    <div class="father">
        <div class="footer">
            <div class="footer_top">
                <ul>
                    <li class="not"><a href="#" class="iconfont icon-banshou"> 预约维修服务</a></li>
                    <li><a href="#" class="iconfont icon-7tiantuihuobaozhang"> 7天无理由退货</a></li>
                    <li><a href="#" class="iconfont icon-15tianhuanhuofuwu"> 15天免费换货</a></li>
                    <li><a href="#"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-liwuhe"></use>
                            </svg> 满69包邮</a></li>
                    <li><a href="#" class="iconfont icon-didian"> 520余家售后网点</a></li>
                </ul>
            </div>
            <div class="footer_bottom">

                <ul>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">订单操作</a></li>
                </ul>
                <ul>
                    <li><a href="#">服务支持</a></li>
                    <li><a href="#">售后政策</a></li>
                    <li><a href="#">自助服务</a></li>
                    <li><a href="#">相关下载</a></li>

                </ul>
                <ul>
                    <li><a href="#">线下门店</a></li>
                    <li><a href="#">亚马逊之家</a></li>
                    <li><a href="#">服务网点</a></li>
                    <li><a href="#">授权体验店</a></li>

                </ul>
                <ul>
                    <li><a href="#">关于亚马逊</a></li>
                    <li><a href="#">了解亚马逊</a></li>
                    <li><a href="#">加入亚马逊</a></li>
                    <li><a href="#">投资者关系</a></li>
                    <li><a href="#">企业社会责任</a></li>
                    <li><a href="#">廉洁举报</a></li>
                </ul>
                <ul>
                    <li><a href="#">关注我们</a></li>
                    <li><a href="#">新浪微博</a></li>
                    <li><a href="#">官方微信</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">公益基金会</a></li>

                </ul>
                <ul>
                    <li><a href="#">特色服务</a></li>
                    <li><a href="#">F 码通道</a></li>
                    <li><a href="#">礼物码</a></li>
                    <li><a href="#">防伪查询</a></li>

                </ul>
                <div class="underfined">
                    <p>400-100-5678</p>
                    <p>8:00-18:00（仅收市话费）</p>
                    <div class="iconfont icon-xiaoxi_huaban1-copy"> <a href="#">人工客服</a></div>
                    <p>关注亚马逊: <a href="#"><span class="iconfont icon-weibo" style="margin-right: 10px;"></span></a>
                        <a href="#"><span class="iconfont icon-weixin"></span></a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="foot">
            <div class="foot_top">
                <ul>
                    <li>关于我们</li>
                    <li>亚马逊成立于1995年7月，总部在美国西雅图。2015年，亚马逊全球开店业务进入中国，旨在借助亚马逊全球资源，帮助中国卖家抓住跨境电商新机遇，发展出口业务，拓展全球市场，打造国际品牌。目前，亚马逊美国、加拿大、墨西哥、英国、法国、德国、意大利、西班牙、荷兰、瑞典、日本、新加坡、澳大利亚、印度、阿联酋、沙特和波兰等17大海外站点已面向中国卖家开放，吸引数十万中国卖家入驻。
                    </li>
                    <li class="aa"><a href="#">亚马逊中国站点</a></li>
                    <li class="bb"><a href="#">亚马逊海外购</a></li>
                </ul>

                <div class="contact_us">
                    <p>联系我们</p>
                    <div><a href="#" style="color: #fff;">联系卖家支持</a></div>
                    <div><a href="#" style="color: #fff;">区域跨境电商园</a></div>
                </div>
                <div class="qr_code">
                    <div class="qr_code_1">
                        <p>关注亚马逊全球开店官方微信</p>
                        <img src="../img/QR-Code.png" alt="二维码">
                        <p>(私信"AGS"获取官方爆品指南)</p>
                    </div>
                    <div class="qr_code_2">
                        <p>下载卖家官方APP</p>
                        <img src="../img/qr-code-2.png" alt="二维码">
                    </div>
                </div>

            </div>
            <div class="foot_middle"></div>
            <div class="foot_bottom">
                <div><img src="../img/logo.png" alt="logo"></div>
                <div>
                    <p class="over">@copy2021, Amazon Services LLC. All Rights Reserved. An Amazon Company</p>
                </div>
            </div>

        </div>


    </footer>

</body>

</html>